<template>
  <ul class="barrage-wrapper">
    <li v-for="(item, index) in currentList" ref="listItem" class="list-group-item" :key="index"
      :style="{
        width: index === (currentList.length - 1) ? lastX + 'px' : ((index === 0) ? firstX+'px' : ''),
        height: index === (currentList.length - 1) ? lastY + 'px' : ''
      }">
        <div ref="itemContent" style="height: fit-content; width: fit-content;">
            <div class="item-content">
              <img class="img" v-lazy="item.headUrl"/>
              <p>{{item.nickname}}下单成功</p>
            </div>
        </div>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
import animations from 'create-keyframe-animation'

const COMPONENT_NAME = 'barrage'

export default {
  name: COMPONENT_NAME,
  props: {
    list: {
      type: Array,
      default: []
    },
    loop: {
      type: Boolean,
      default: true
    },
    autoPlay: {
      type: Boolean,
      default: true
    },
    showNumber: {
      type: Number,
      default: 4
    },
    interval: {
      type: Number,
      default: 1000
    }
  },
  computed: {
    currentList() {
      if (this.showNumber >= this.list.length) {
        return this.list
      } else {
        return this.list.slice(0, this.showNumber)
      }
    }
  },
  data() {
    return {
      currentBarrageIndex: 0,
      lastX: '',
      lastY: '',
      firstX: '',
      firstY: ''
    }
  },
  mounted() {
    this.startAnimate()
  },
  methods: {
    startAnimate () {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        const tmp = this.currentList[0]
        this.currentList.push(tmp)
        this.lastX = 0
        this.lastY = 0
        setTimeout(() => {
          this.lastX = this.$refs.itemContent[this.showNumber - 1].clientWidth
          this.lastY = this.$refs.itemContent[this.showNumber - 1].clientHeight

          this.firstX = this.$refs.itemContent[0].clientWidth
          this.firstY = this.$refs.itemContent[0].clientHeight
          this.fadeInAnimation()
        }, 80)
        this.fadeOutAnimation()
      }, 2100)
    },
    fadeInAnimation () {
      animations.registerAnimation({
        name: 'fadeIn',
        animation: [
          {
            opacity: 0.5,
            scale: 0
          },
          {
            opacity: 1,
            scale: 1
          }
        ],
        presets: {
          duration: 1800,
          resetWhenDone: true
        }
      })
      animations.runAnimation(this.$refs.listItem[this.$refs.listItem.length - 1], 'fadeIn')
    },
    fadeOutAnimation (index) {
      animations.registerAnimation({
        name: 'fadeOut',
        animation: [
          {
            opacity: 1
          },
          {
            opacity: 0
          }
        ],
        presets: {
          duration: 1800,
          resetWhenDone: true
        }
      })
      animations.runAnimation(this.$refs.listItem[0], 'fadeOut', () => {
        // this.currentList.splice(0, 1)
      })
    }
  },
  watch: {
    loop() {
      // this.update()
    },
    autoPlay() {
      // this.update()
    },
    list() {
      // this.update()
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "~@/assets/css/variable"

  .barrage-wrapper {
    position: absolute;
    bottom: 50%;
    left: 0px;
    width: 210px;
    .list-group-item {
      transition: width 1.2s, height 1.2s;
      transform-origin: 0 100%;
      overflow hidden;
      text-align: left;
      .item-content {
        background: #666;
        border-radius: 4px;
        width: fit-content;
        padding: 6px 12px;
        display: flex;
        margin-bottom: 12px;

        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        p {
          font-size: $font-size-desc;
          margin-left: 9px;
          margin-top: 5px;
          width: 135px;
          color: #fff;
        }
      }
    }
  }
</style>
